<template>
<div class="login">
    <div class="login-con">
        <h2>登录</h2>
        <p class="line"></p>
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item prop="username">
                <label class="title">用户名：</label>
                <el-input prefix-icon="el-icon-user" v-model.trim="form.username" placeholder="请输入账户昵称"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <label class="title">密码：</label>
                <el-input
                    :show-password="true"
                    prefix-icon="el-icon-lock"
                    v-model.trim="form.password"
                    placeholder="请输入密码"
                ></el-input>
            </el-form-item>
            <el-form-item prop="isCheck">
                <el-checkbox v-model="form.rememberMe">
                    记住密码
                </el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button class="btn" type="primary" @click="loginClick">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>
<script>
import  jwt  from  'jsonwebtoken'
const Base64 = require("js-base64").Base64;
import Cookies from 'js-cookie';
import {login,getLogin} from '@/api/login.js'
import urlConfig from '@/utils/urlConfig'
import {Logon} from '@/utils/browser'

export default{
    data(){
        return{
            form: {
                username:'',//账户名称
                password: "", //密码
                rememberMe: false ,//是否记住密码
            },
            userId:'',
            rules:{
                username:[{ required: true,trigger: 'blur', message: "请输入账户名称"},
                    {
                        min: 2,
                        max: 15,
                        message: '长度在 2 到 15 个字符',
                        trigger: 'blur',
                    },
                ],
                password: [
                    { required: true,trigger: 'blur', message: "请输入密码" },
                    {
                        min: 5,
                        max: 15,
                        message: "请输入5到15位长度密码",
                        trigger: 'blur',
                    }
                ],
            },
            websiteUrl:'',
        }
    },
    methods:{
        // 点击登录
        loginClick(){
            this.$refs.form.validate(result => {
                // 登陆接口调用
                if (result == true) {
                    login(this.form).then(res => {
                        if(res.success == true){
                            getLogin(this.form.username).then(res=>{
                                if(res.code == 200){
                                    console.log('即时通许登录成功')
                                }
                            })
                            this.$message.success("登录成功");
                            localStorage.setItem("token",res.token);
                            let jwt = require('jsonwebtoken');
                            let str = jwt.decode(res.token);
                            this.userId = str.AdminID;
                            // this.websiteUrl = urlConfig.website + this.userId + '/'+this.form.username;
                            Logon(this.form.username);
                            this.$router.push({path:"/"+ this.userId + '/'+ this.form.username + '/2'})
                        }
                    });
                    if(this.form.rememberMe){
                        let password = Base64.encode(this.form.password); // base64加密
                        Cookies.set('username', this.form.username, {
                                    expires: 30,
                                });
                        Cookies.set('password', password, {
                            expires: 30,
                        });
                        Cookies.set('rememberMe', this.form.rememberMe, {
                            expires: 30,
                        });
                    }else{
                        Cookies.remove('username');
                        Cookies.remove('password');
                        Cookies.remove('rememberMe');
                    }
                   
                }
            });
        },
        getCookie() {
            const username = Cookies.get('username');
            const password = Cookies.get('password');
            const rememberMe = Cookies.get('rememberMe');
            this.form = {
                username: username === undefined ? this.form.username : username,
                password: password === undefined ? this.form.password : Base64.decode(password),// base64解密
                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
            };
            // console.log(this.form);
         
        },
       
    },
    created() {
        
    },
    mounted(){
        this.getCookie();
    }
}
</script>
<style lang="less" scoped>
.login{
    width: 100%;
    height: 100%;
    background-image: url("./../assets/loginbg.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    .login-con{
        width: 40%;
        padding: 3% 3.5% 3% 20%;
        background: url("./../assets/logincon.png");
        background-size: 100% 100%;
        overflow: hidden;
        h2{
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 0;
        }
        .line{
            width: 53px;
            height: 3px;
            background: #1476ED;
            border-radius: 4px;
            margin: 6px auto 4%;
        }
        .title{
            color: #333333;
        }
       .el-form-item{
            margin-bottom: 6px;
       }
        .btn {
            width: 100%;
            border-radius: 16px;
        }
        
    }
    @media screen and (max-width: 900px) {
        .login-con {
           width: 66%;
           padding: 1.5% 3.5% 3% 33%;
        }
    }
    @media screen and (min-width:900px) and (max-width:1280px){
        .login-con {
           width: 50%;
           padding: 1.5% 3.5% 3% 25%;
        }
    }
    @media screen and (min-width:1280px) and (max-width:1920px){
        .login-con {
           width: 40%;
           padding: 1.5% 3.5% 3% 20%;
        }
    }
}

</style>